<template>
  <div>
      <Form ref="userform" :model="user" :rules="userformRule" :label-width="150">
        <Row>
          <i-col span='12'>
            <FormItem label="账号" prop="username">
              <Input v-model="user.username" :maxlength="20" clearable  :readonly="isReadonly" />
            </FormItem>
          </i-col>
          <i-col span='12'>
            <FormItem label="密码" prop="password">
              <Input v-model="user.password"  type="password" placeholder="10字以内" :maxlength="20" clearable  :readonly="isReadonly" />
            </FormItem>
          </i-col>
          <i-col span='12'>
            <FormItem label="性别" prop="sex">
                <i-switch v-model="user.sex" size="large" true-color="#13ce66" false-color="#ff4949" style="float: left">
                    <span slot="open">男</span>
                    <span slot="close">女</span>
                </i-switch>
              <!-- <Input v-model="user.sex"  :maxlength="10" :readonly="isReadonly"/> -->
            </FormItem>
          </i-col>
          <i-col span='12'>
            <FormItem label="注册时间" prop="registDt">
              <DatePicker v-model="user.registDt" :readonly="isReadonly" :time-picker-options="{steps: [1, 65, 10]}" :options="optionsDate" type="datetime" format="yyyy-MM-dd" placeholder="请选择日期" style="float:left"></DatePicker>
            </FormItem>
          </i-col>
        </Row>
         <Row style="text-align: center;">
            <Button :disabled="isReadonly" type="success" icon="checkmark" @click="save('userform')">保  存</Button>
            <Button :disabled="isReadonly" type="default" icon="refresh" @click="resetTaskForm('actTaskBasInfoForm')">重  置</Button>
        </Row>
    </Form>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'form',
  data () {
    return {
        isReadonly: false,
        user:{
            username: '',
            password: '',
            sex: false
        },
        userformRule:{
          username: [
            { required: true, message: '账号名不能为空', trigger: 'blur' },{max : 50, message : '账号名最多输入20位'}
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },{max : 10, message : '密码不能为空'}
          ],
          registDt: [
            { type:'date', required: true, message: '注册时间不能为空', trigger: 'blur' }
          ]
        },
    }
  },
  methods: {
      save(formName){
        this.$refs[formName].validate((valid) => {
            if(valid){
                this.axios.post("api/user/add",{
                    username: this.user.username,
                    password: this.user.password,
                    sex: this.sex ? 0 : 1 
        
                }).then((response) => {
                    if(response.data.code == 0){
                        this.$Notice.success({
                            top: 50,
                            duration: 2,
                            desc: response.data.msg
                        })
                        this.$router.push('/tablelist')
                    }
                })
            }
        })
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
